<template>
    <main-layout>
        <div class="proDetailBox">
            <!-- 顶部内容 -->
            <van-nav-bar
                title="项目详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
            <!--第一部分 图片信息-->
            <img class="proImg" :src="projectDetail.image?projectDetail.image.imageurl:''">
            
            <!--第二部分 标题详细信息-->
            <div class="detail">
                <div>
                    <span class="detailName">项目：{{projectDetail.proname}}</span>
                    <span class="detailPrice">价格：{{projectDetail.proprice}}</span>
                </div>
                <div class="detailExplain">{{projectDetail.proexplain}}</div>
            </div>
            
            <!--第三部分 详情描述信息-->
            <div class="detailDescribe">
                <div class="Describe">详情描述</div>
                <span class="Step">{{projectDetail.prostep}}</span>
            </div>
            
            <!--第四部分 按钮-->
            <button class="detailBtn" @click="toOrderEvt(projectDetail.id)" style="width: 80%;">立即预定</button>
        </div>
    </main-layout>
</template>

<script>
    import { getProjectDetailApi } from '../../axios/projectDetails'
    export default {
        data() {
            return {
                //项目详情对象
                projectDetail:{}
            }
        },

        async created() {
            //截取地址栏id号
            let url = window.location.href
            let id=url.split('=')[1]

            //调用商品详情页接口获取数据
            let projectDetailResult = await getProjectDetailApi(id)
            if(projectDetailResult.code==0){
                let path=projectDetailResult.data.image.imageurl
                projectDetailResult.data.image.imageurl='http://120.79.136.98/Hairdressing/images/'+path
                this.projectDetail=projectDetailResult.data
            }
        },

        methods: {
            //返回首页
            onClickLeft(){
                this.$router.push('/home')
            },

            //立即预定按钮
            toOrderEvt(id){
                this.$router.push('/proReservation?id='+id)
            }
        },
    }
</script>

<style lang="less" scoped>
    .proDetailBox{
        height: 100%;
        overflow-x: hidden;
        /*第一部分*/
        .proImg{
            width: 100%;
            height: 220px;
        }

        /*第二部分*/
        .detail{
            margin: 25px 10px 0 10px;
            border-bottom: 2px solid #111;
            > div{
                display: flex;
                justify-content: space-evenly;
                .detailName{
                    font-weight: bold;
                    font-size: 18px;
                }

                .detailPrice{
                    font-weight: bold;
                    font-size: 16px;
                    color: crimson;
                    padding-top: 1.5px;
                }
            }

            .detailExplain{
                font-size: 18px;
                color: grey;
                line-height: 1.8;
                letter-spacing: 1.8px;
                margin: 30px 0 45px;
            }
        }

        /*
        第三部分*/
        .detailDescribe{
            margin: 30px 25px 0 25px;
            .Describe{
                font-weight: bold;
                font-size: 26px;
                margin-bottom: 30px;
            }

            .Step{
                font-size: 17px;
                color: grey;
                line-height: 2;
                letter-spacing: 0.5px;
            }
        }

        /*第四部分*/
        .detailBtn{
            display: block;
            width: 200px;
            height: 50px;
            margin: 30px auto;
            background-color: #F76C76;
            color: #fff;
            border: none;
            outline: none;
            border-radius: 10px;
            transition-duration: 0.5s;
            &:hover{
                background-color: #C3545C;
            }
        }
    }
</style>